import Vue from 'vue';
import util from '../util';

/**/
function scrollFactory(el, {value,expression,arg},vnode){
    return function(){
        let fn=null,
            timer=null;
        if(fn){
            return fn;
        }
        return fn=function(e){
            if(timer){
                clearTimeout(timer);
            }
            timer=setTimeout(()=> {
                let el=e.target,
                    containerHeight=el.clientHeight,
                    contentHeight=el.scrollHeight,
                    scrollTop=el.scrollTop
                // console.log(containerHeight,contentHeight,scrollTop);   
                if(contentHeight-containerHeight-scrollTop<30){
                    console.log('bottom');
                    value.apply(el.__vue__);
                }
                if(scrollTop<=30){
                    console.log('top');
                    value.apply(el.__vue__);
                }
            }, 300);
        };
    }();
}


Vue.directive('scroll',{
    bind(el, {value,expression,arg},vnode){
        el.style.overflowX = 'hidden';
        el.style.overflowY = 'scroll';
        console.log(this)
        el.__vue__directive__scroll=scrollFactory(el, {value,expression,arg},vnode);
        el.addEventListener('scroll',el.__vue__directive__scroll);
    },
    unbind(el, {value,expression,arg}){
        el.removeEventListener(el.__vue__directive__scroll);
    }
})